<template>
  <div class="main-layout-1">
    <div id="map"
         ref="map"
    ></div>
  </div>
</template>

<script>
  import 'ol/ol.css';

  import { Map, View, Feature } from 'ol'
  import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
  import { OSM, Vector as VectorSource } from 'ol/source'
  import { fromLonLat } from 'ol/proj'
  import { Style, Fill, Stroke } from 'ol/style'
  import { MultiPolygon, Polygon } from 'ol/geom'

  import axios from 'axios'

  export default {
    name: '',
    data () {
      return {
      }
    },
    mounted () {
      this.initMap()

      this.queryData('100000', 'inside')
    },
    methods: {
      initMap () {

      },
      queryData (adcode, type) {
        const url = `/areas_v3/bound/geojson?code=${adcode}_full`
        axios.get(url).then(res => {
          const { status, data } = res
          if (status === 200) {

          } else {
            throw new Error()
          }
        }).catch(err => {
          throw new Error(err)
        })
      },

    },
  }
</script>

<style scoped>
  #map {
    width: 100%;
    height: 100%;
  }
</style>
